﻿<html>
<head>
<meta charset="utf-8">
<title>K线图</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="js/fontSize.js"></script>
<script src="js/echarts.min.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="js/vue.min.js"></script>
<style>
  body{ background-color: #131F30; }
</style>
</head>
<body>

<div class="page" id="app">

  <div class="top-price">
    <div class="top-lt">
      <div class="lt-num"><b>￥{{openPrice || 0}}</b>{{coinGain}}%</div>
      <div class="lt-price">≈{{info.usd || '0.00'}} USD</div>
    </div>
    <ul class="top-rg">
      <li><span>最高</span>{{info.highestPrice || '0.00'}}</li>
      <li><span>最低</span>{{info.lowestPrice || '0.00'}}</li>
      <li><span>24H</span>{{info.todayDealCount || 0}}</li>
    </ul>
  </div>

  <div class="main-box">
    <div class="main-list">
      <span :class='type==1 ? "cur" : ""' @click='getType(1,1, 1)'>分时</span>
      <span :class='type==2 ? "cur" : ""' @click='getType(2,1, 15)'>15分</span>
      <span :class='type==3 ? "cur" : ""' @click='getType(3,2, 60)'>1小时</span>
      <span :class='type==4 ? "cur" : ""' @click='getType(4,2, 240)'>4小时</span>
      <span :class='type==5 ? "cur" : ""' @click='getType(5,3, 1440)'>日线</span>
      <span :class='type==6 ? "cur" : ""' @click='getType(6)'>更多<img src="img/icon-down.png"></span>
      <span :class='type==7 ? "cur" : ""' @click='getType(7)'>指标<img src="img/icon-down.png"></span>
    </div>
    <div class="main-type" v-if='type==6'>
      <div class="type-li">
        <span :class='newType==1 ? "cur" : ""' @click='getNewType(1,1, 1)'>1分</span>
        <span :class='newType==2 ? "cur" : ""' @click='getNewType(2,1, 5)'>5分</span>
        <span :class='newType==3 ? "cur" : ""' @click='getNewType(3,1, 30)'>30分</span>
        <span :class='newType==4 ? "cur" : ""' @click='getNewType(4,2, 120)'>2小时</span>
        <span :class='newType==5 ? "cur" : ""' @click='getNewType(5,2, 480)'>8小时</span>
        <span :class='newType==6 ? "cur" : ""' @click='getNewType(6,3, 10080)'>周线</span>
        <span :class='newType==7 ? "cur" : ""' @click='getNewType(7,3, 43200)'>月线</span>
      </div>
    </div>
    <div class="main-type" v-if='type==70'>
      <div class="type-li">
        <span class="name">主指标</span>
        <span class="cur">MA</span>
        <span>EMA</span>
        <span>BOLL</span>
      </div>
      <div class="type-li">
        <span class="name">副指标</span>
        <span class="cur">MACD</span>
        <span>KDJ</span>
        <span>RSI</span>
      </div>
    </div>
    <div id="main"></div>
  </div>

  <div class="tab-box">
    <div class="tab-tit">
      <span :class='botType==1 ? "cur" : ""' @click='getBotType(1)'>深度</span>
      <span :class='botType==2 ? "cur" : ""' @click='getBotType(2)'>成交</span>
      <span :class='botType==3 ? "cur" : ""' @click='getBotType(3)'>简介</span>
    </div>
    <div id="tab-main">
      
    </div>
    <div class="tab-name">
      <span class="cur"><b></b>买盘</span>
      <span><b></b>卖盘</span>
    </div>
  </div>

  <div class="bot-list" v-if='botType==1'>
    <div class="bot-tit">
      <span>买盘 数量（YF）</span>
      <span>价格（CNY）</span>
      <span>数量（YF）卖盘</span>
    </div>
    <div class="list-type">
      <span>保留小数点2位<img src="img/icon-down.png"></span>
    </div>
    <div class="list-ul">
      <ul>
        <li class="lt" v-for='(item, index) in deepArr.buy' v-if='index<5'>
          <span class="sort">{{index+1}}</span>
          <span class="price">{{item.count}}</span>
          <span class="num">{{item.price}}</span>
          <span class="bg" :style='"width:"+item.ratio+"rem"'></span>
        </li>
      </ul>
      <ul>
        <li class="rg" v-for='(item, index) in deepArr.sell' v-if='index<5'>
          <span class="num">{{item.price}}</span>
          <span class="price">{{item.count}}</span>
          <span class="sort">{{index+1}}</span>
          <span class="bg" :style='"width:"+item.ratio+"rem"'></span>
        </li>
      </ul>
    </div>
  </div>

  <div class="bot-list" v-if='botType==2'>
    <div class="bot-tit">
      <span>时间</span>
      <span>价格（CNY）</span>
      <span>交易量（YF）</span>
    </div>
    <div class="list-type">
      <span>保留小数点2位<img src="img/icon-down.png"></span>
    </div>
    <div class="list-new">
      <li v-for='(item, index) in tradeArr' v-if='index<3'>
        <div class="time"><span>{{item.date}}</span>{{item.time}}</div>
        <div :class='item.type==0 ? "price" : "price cur-price"'><span>{{item.cny}}</span>≈{{item.usd}} CNY</div>
        <div class="num"><span>{{item.num}}</span>≈{{item.total}} CNY</div>
      </li>
    </div>
  </div>

  <div class="bot-list" v-if='botType==3'>
    <div class="bot-con-tit">壹付（YF）简介</div>
    <div class="bot-con">详细说明</div>
  </div>

</div>

<script src="js/axios.min.js"></script>
<script>
//获取屏幕的宽度
var clientWidth = document.documentElement.clientWidth;
//根据设计图中的canvas画布的占比进行设置
var canvasHeight = Math.floor(clientWidth*912/750);
console.log(canvasHeight);
document.getElementById('main').setAttribute('height', canvasHeight+'px');

var myChart = null;
var flag = false;//月线图
new Vue({
  el: '#app',
  data: {
    type: 1,
    newType: 1,
    botType: 1,
    rate: 1, //汇率
    info: {}, //币种信息
    curInfo: {}, //最新信息
    deepArr: {},
    tradeArr: [],
    coinGain: '+0',
    openPrice: 0,
    //k线图数据
    kData: {
      datas: [],
      times: [],
      newTimes: [],
      vols: [],
      macds: [],
      difs: [],
      deas: []
    },
    lineType: 1,
    dataType: 1,
    pageNum: 1
  },
  methods: {
    getType:function(type,dataType, num){
      this.type = type;
      this.dataType = dataType;
      if(type==6){
        this.newType = 1;
        this.dataType = 1;
        this.kline(1);
      }
      else if(type==7){

      }
      else{
        var min = num;
        this.kline(min);
        this.lineType = num;
      }
    },
    getNewType:function(type,dataType, num){
      this.newType = type;
      this.type = type;
      this.dataType = dataType;
      var min = num;
      this.kline(min);
      this.lineType = num;
    },
    getBotType:function(type){
      this.botType = type;
      // if(type==1){
      //   this.getDeep();
      // }
      // else if(type==2){
      //   this.getTrade();
      // }
    },
    tabChart:function(dataX, dataY){
      //深度图
      var newChart = Highcharts.chart('tab-main', {
        chart: {
          backgroundColor: '#131F30',
          type: 'area',
          spacing: 0,
          marginLeft: 0,
          marginRight: 0
        },
        title:{
          text:null
        },
        legend:{
          enabled:false,
        },
        credits:{
          enabled:false,
        },
        xAxis: {
          title: {
            enabled: false
          },
          labels:{
            x: 0,
            padding: 0,
            style: {
              color: '#5F7796'
            },
            formatter: function() {
              return dataX[this.value]
            },
          },
          lineWidth: 0,
          minPadding:0,
          tickWidth: 0,
          tickmarkPlacement:'on'
        },
        yAxis: {
          title: {
            enabled: false,
          },
          opposite: true, //对立
          minPadding:0,
          startOnTick:false,
          tickWidth: 0,//刻度
          gridLineWidth:0,
          labels: {
            x: -30,
            y: 0,
            padding: 0,
            style: {
              color: '#5F7796'
            },
            formatter: function() {
              this.value = this.value >= 1000?this.value / 1000 + 'k':this.value
              return this.value;
            }
          }
        },
        tooltip: {
          headerFormat:'',
          pointFormatter:function(){
            return '<b>数量：'+dataX[this.x]+'</b><br/><b>价格：'+this.y+'</b>'
          } 
        },
        plotOptions: {
          area: {
            marker: {
              enabled: false,
              symbol: 'circle',
              radius: 4,
              states: {
                hover: {
                  enabled: true
                }
              }
            }
          }
        },
        series: [{
          zoneAxis: 'x',
          color:'#F7663D',
          fillOpacity: 0.2,
          zones: [{
              value: (dataY.length) / 2 - 1,
              color: '#03BF86'
          }],
          data: dataY
        }]
      });
    },
    getDeep:function(){
      //深度图
      var self = this;
      axios.get(api + "/front/kline/dataThree", {
        params: {
          coinTypeId: 1
        }
      })
      .then(function (res) {
        if(res.data.code == 0){
          //数量 剩余数量 类型0买1卖 价格
          //dealAliveCoinCount  surplusCount dealType dealPrice
          var newArr = res.data.data;
          var buyData = [], sellData = [];
          var newBuy = [], newSell = [];
          for(var i=0,len=newArr.hangBuy.length;i<len;i++){
            buyData.push(
              [newArr.hangBuy[i].dealPrice, newArr.hangBuy[i].dealAliveCoinCount]
            )
            var ratio = 1;
            ratio = newArr.hangBuy[i].dealAliveCoinCount / (newArr.hangBuy[i].dealAliveCoinCount+newArr.hangBuy[i].surplusCount);
            ratio = ratio.toFixed(2);
            newBuy.push({
              price: newArr.hangBuy[i].dealPrice.toFixed(2),
              count: newArr.hangBuy[i].dealAliveCoinCount,
              ratio: ratio
            })
          }
          for(var j=0,lens=newArr.hangSale.length;j<lens;j++){
            sellData.push(
              [newArr.hangSale[j].dealPrice, newArr.hangSale[j].dealAliveCoinCount]
            )
            var ratio = 1;
            ratio = newArr.hangSale[j].dealAliveCoinCount / (newArr.hangSale[j].dealAliveCoinCount+newArr.hangSale[j].surplusCount);
            ratio = ratio.toFixed(2);
            newSell.push({
              price: newArr.hangSale[j].dealPrice.toFixed(2),
              count: newArr.hangSale[j].dealAliveCoinCount,
              ratio: ratio
            })
          }
          //深度数据
          self.deepArr = {
            buy: newBuy,
            sell: newSell
          }

          var buy = buyData;
          var sell = sellData;
          var dataX = [];
          var dataY = [];
          buy.forEach(ele => {
              dataX.push(ele[0])
              dataY.push(ele[1])
          })
          sell.forEach(ele => {
              dataX.push(ele[0])
              dataY.push(ele[1])
          })
          self.tabChart(dataX, dataY);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    getTrade:function(id,time,type){
      //成交图
      var self = this;
      axios.get(api + "/front/kline/dataFour", {
        params: {
          coinTypeId: id,
          time: encodeURI(time),
          minuteCount: type
        }
      })
      .then(function (res) {
        if(res.data.code == 0){
          var newArr = res.data.data.hangBuy || [];
          var buyData = [], sellData = [];
          var tradeArr = [];
          for(var i=0,len=newArr.length;i<len;i++){
            if(newArr[i].dealType==0){
              buyData.push(
                [newArr[i].singlePrice, newArr[i].dealAliveCoinCount]
              )
            }
            else{
              sellData.push(
                [newArr[i].singlePrice, newArr[i].dealAliveCoinCount]
              )
            }
            var newTime = newArr[i].createTime;
            tradeArr.push({
              type: newArr[i].dealType,
              date: newTime.slice(0,10),
              time: newTime.slice(11,20),
              cny: newArr[i].singlePrice.toFixed(2),
              usd: (newArr[i].singlePrice * self.rate).toFixed(2),
              num: newArr[i].dealAliveCoinCount,
              total: (newArr[i].singlePrice * newArr[i].dealAliveCoinCount).toFixed(2)
            })
          }
          self.tradeArr = tradeArr;

          //深度图
          let buy = buyData;
          let sell = sellData;
          let dataX = [];
          let dataY = [];
          buy.forEach(ele => {
              dataX.push(ele[0])
              dataY.push(ele[1])
          })
          sell.forEach(ele => {
              dataX.push(ele[0])
              dataY.push(ele[1])
          })
          self.tabChart(dataX, dataY);
        }
      })
      .catch(function (error) {
        console.log(error);
      });

      //全站成交记录
      // axios.get(api + "/front/deal/whole/newest", {
      //   params: {}
      // })
      // .then(function (res) {
      //   if(res.data.code == 0){
      //     var newArr = res.data.data;
      //     var tradeArr = [];
      //     for(var i=0,len=newArr.length;i<len;i++){
      //       var newTime = newArr[i].createTime;
      //       tradeArr.push({
      //         date: newTime.slice(0,10),
      //         time: newTime.slice(11,20),
      //         cny: newArr[i].singlePrice.toFixed(2),
      //         usd: (newArr[i].singlePrice * self.rate).toFixed(2),
      //         num: newArr[i].dealAliveCoinCount,
      //         total: (newArr[i].singlePrice * newArr[i].dealAliveCoinCount).toFixed(2)
      //       })
      //     }
      //     self.tradeArr = tradeArr;
      //     console.log(tradeArr)
      //   }
      // })
      // .catch(function (error) {
      //   console.log(error);
      // });
    },
    kline:function(min, flag){
      //分线图
      var self = this;
      var kData = {
        datas: [],
        times: [],
        newTimes: [],
        vols: [],
        macds: [],
        difs: [],
        deas: []
      };
      var url = "/front/kline/dataTwo";
      var params = {
        pageNum: self.pageNum,
        minuteCount: min || 1,
        coinTypeId: 1
      };
      // if(flag){
      //   url = "/front/kline/dataTwo";
      //   params = {
      //     pageNum: 1
      //   };
      // }

      //收盘价
      var closeArr = [];
      axios.get(api + url, {
        params: params
      })
      .then(function (res) {
        if(res.data.code == 0){
          // type 0 挂买 1挂卖
          console.log(res.data)
          var newArr = res.data.data.reverse();
          var len = newArr.length;
          //time0 open1 close2 min3 max4 vol5 tag6 macd7 dif8 dea9
          for(var i=0;i<len;i++){
            kData.datas.push(
              [newArr[i].openPrice, newArr[i].closePrice, newArr[i].lowestPrice, newArr[i].highestPrice, newArr[i].totalDealCount, newArr[i].gain, newArr[i].macd, newArr[i].diff, newArr[i].dea]
            );
            closeArr.push(newArr[i].closePrice);
            kData.newTimes.push(newArr[i].createTime);
            //时间处理 1 分 2时 3天
            var time = newArr[i].createTime;
            if(self.dataType==1){
              time = time.slice(11,16)
            }
            else if(self.dataType==2){
              time = time.slice(5,13)

            }
            else if(self.dataType==3){
              time = time.slice(0,10)
            }
            //console.log(time)
            kData.times.push(time);
            kData.vols.push(newArr[i].totalDealCount);
            // kData.macds.push(newArr[i].macd);
            // kData.difs.push(newArr[i].diff);
            // kData.deas.push(newArr[i].dea);
          }
          //计算指标
          //差离值
          //difs: EMA(12) - EMA(26)
          var difs = [];
          var ema1 = EMA(closeArr, 12);
          var ema2 = EMA(closeArr, 26);
          for(var j=0,jlen=ema1.length;j<jlen;j++){
            var thisVal = (ema1[j] - ema2[j]) ? (ema1[j] - ema2[j]).toFixed(2) : 0;
            difs.push(thisVal)
          }
          console.log(difs)

          //离差平均值
          //deas: EMA(9)
          var deas = EMA(difs, 9);
          console.log(deas)

          //MACD = （DIF-DEA）*2
          var macd = [];
          for(var k=0,klen=difs.length;k<klen;k++){
            var thisVal = (difs[k] - deas[k]) ? (difs[k] - deas[k]).toFixed(2) : 0;
            macd.push(thisVal)
          }
          console.log(macd)

          kData.difs = difs;
          kData.deas = deas;
          kData.macds = macd;
          self.kData = kData;
          //console.log(kData.datas)
          //一共50条 分两部分;
          //先显示前25条,左滑显示后25条;
          //超过50条 左滑 pageNum + 1
          self.showChart(1);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
      function EMA(data, day){
        var result = [];
        for (var i = 0, len = data.length; i < len; i++) {
            if (i < day) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < day; j++) {
                sum += kData.datas[i - j][1];
            }
            result.push((sum / day).toFixed(2));
        }
        return result;
      }
    },
    mline:function(){
      //月线图
      axios.get(api + "/front/kline/month", {
        params: {
          pageNum: 1
        }
      })
      .then(function (res) {
        if(res.data.code == 0){
          console.log(res.data)
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    //数据渲染
    showChart:function(num){
      var newData = this.kData;
      var kData = {
        datas: [],
        times: [],
        vols: [],
        macds: [],
        difs: [],
        deas: []
      };
      if(num==1){
        for(var i=25,len=newData.datas.length;i<len;i++){
          kData.datas.push(newData.datas[i]);
          kData.times.push(newData.times[i]);
          kData.vols.push(newData.vols[i]);
          kData.macds.push(newData.macds[i]);
          kData.difs.push(newData.difs[i]);
          kData.deas.push(newData.deas[i]);
        }
      }
      else{
        for(var i=0,len=newData.datas.length;i<25;i++){
          kData.datas.push(newData.datas[i]);
          kData.times.push(newData.times[i]);
          kData.vols.push(newData.vols[i]);
          kData.macds.push(newData.macds[i]);
          kData.difs.push(newData.difs[i]);
          kData.deas.push(newData.deas[i]);
        }
      }
      var coinTypeId = 1;
      var self = this;
      var option = {
        backgroundColor: '#0F1827',
        tooltip: {
            trigger: 'axis',
            triggerOn: 'click',
            axisPointer: {
                type: 'line'
            },
            //trigger: 'item',
            formatter: function (params) {
              if(params[0].seriesName=="K线图"){
                var minuteCount = self.lineType || 1;
                var thisIndex = params[1].dataIndex;
                console.log(self.kData.newTimes[thisIndex])
                var time = self.kData.newTimes[thisIndex];
                //console.log(thisIndex)
                self.getTrade(coinTypeId,time,minuteCount);
                console.log(params)
                var htmlStr ='';
                htmlStr += "<div class='k-li'><span>时间</span><span>" + params[0].name + '</span></div>';
                htmlStr += "<div class='k-li'><span>开盘</span><span>" + params[0].data[1] + '</span></div>';
                htmlStr += "<div class='k-li'><span>收盘</span><span>" + params[0].data[2] + '</span></div>';
                htmlStr += "<div class='k-li'><span>最高</span><span>" + params[0].data[3] + '</span></div>';
                htmlStr += "<div class='k-li'><span>最低</span><span>" + params[0].data[4] + '</span></div>';
                htmlStr += "<div class='k-li'><span>涨跌幅</span><span>" + params[0].data[5] + '%</span></div>';
                htmlStr += "<div class='k-li'><span>成交量</span><span>" + params[0].data[9] + '</span></div>';
                return htmlStr;
              }
            }
        },
        legend: {
            show: false,
            data: ['KLine', 'MA5']
        },
        grid: [           
        {
            left: '0',
            right: '10%',
            height: '60%',
            borderWidth: 0,
            containLabel: false
        },{
            left: '0',
            right: '10%',
            top: '78%',
            height: '10%'
        },{
            left: '1%',
            right: '10%',
            top: '88%',
            height: '14%'
        }],
        xAxis: [{
            type: 'category',
            data: kData.times,
            scale: true,
            boundaryGap: false,
            axisLine: {
              show: false,
              onZero: false 
            },
            axisTick: {
              show: false
            },
            splitLine: { 
              show: true,
              lineStyle: {
                color: '#172436'
              }
            },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax',
            axisLabel: {
              show: true,
              align: 'left',
              textStyle: {
                color: '#647D9D'
              }
            }
        },{
            type: 'category',
            gridIndex: 1,
            data: kData.times,
            axisLabel: {
              show: false
            }
        },{
            type: 'category',
            gridIndex: 2,
            data: kData.times,
            axisLabel: {show: false}
        }],
        yAxis: [{
            scale: true,
            splitLine: { 
              show: true,
              lineStyle: {
                color: '#172436'
              }
            },
            splitArea: {
                show: false
            },
            position: 'right',
            axisLine: {
              show: false,
              onZero: false 
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#647D9D'
              }
            }
        },{
            gridIndex: 1,
            splitNumber: 3,
            axisLine: {onZero: false},
            axisTick: {show: false},
            splitLine: {show: false},
            axisLabel: {show: true}
        },{
          gridIndex: 2,
            splitNumber: 4,
            axisLine: {onZero: false},
            axisTick: {show: false},
            splitLine: {show: false},
            axisLabel: {show: true}
        }],
        dataZoom: [{
            show: false,
            xAxisIndex: [0, 2],
            type: 'slider',
            start: 20,
            end: 100
        }],
        series: [{
                name: 'K线图',
                type: 'candlestick',
                data: kData.datas,
                itemStyle: {
                    normal: {
                      color: '#ef232a',
                      color0: '#14b143',
                      borderColor: '#ef232a',
                      borderColor0: '#14b143'
                    }
                },
                // markArea: {
                //     silent: true,
                //     itemStyle: {
                //         normal: {
                //             color: 'Honeydew'                  
                //         }
                //     },
                //     data: fenduans()
                // },
                // markPoint: {
                //     data: [
                //         {type: 'max', name: '最大值'},
                //         {type: 'min', name: '最小值'}
                //     ]
                // },
                // markLine: {
                //     label: {
                //         normal: {
                //             position: 'middle',
                //             textStyle:{color:'Blue',fontSize: 15}
                //         }
                //     },
                //     data: fenduans(),
                //     symbol: ['circle', 'none']
                    
                // }
            }, {
                name: 'MA5',
                type: 'line',
                data: calculateMA(5),
                smooth: true,
                lineStyle: {
                    normal: {
                        opacity: 0.5
                    }
                }
            },{
                name: 'Volumn',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: kData.vols,
                itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList;
                        if (kData.datas[params.dataIndex][1]>kData.datas[params.dataIndex][0]) {
                            colorList = '#ef232a';
                        } else {
                            colorList = '#14b143';
                        }
                        return colorList;
                    },
                }
              }
            },{
                name: 'MACD',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: kData.macds,
                itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList;
                        if (params.data >= 0) {
                            colorList = '#ef232a';
                        } else {
                            colorList = '#14b143';
                        }
                        return colorList;
                    },
                }
              }
            },{
                name: 'DIF',
                type: 'line',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: kData.difs
            },{
                name: 'DEA',
                type: 'line',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: kData.deas
            }
        ]
      };
      myChart.setOption(option);
      myChart.on('click', function(params){
        console.log(params)
      })
      //MA计算公式
      function calculateMA(dayCount) {
        var result = [];
        for (var i = 0, len = kData.times.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += kData.datas[i - j][1];
            }
            result.push((sum / dayCount).toFixed(2));
        }
        return result;
      }
    }
  },
  created:function(){
    var self = this;
    var rate = 1;
    //获取汇率
    axios.get(api + "/front/info/exchangeRate", {
      params: {}
    })
    .then(function (res) {
      if(res.data.code == 0){
        self.rate = res.data.data;
        rate = res.data.data;
      }
      //获取币种信息
      axios.get(api + "/front/kline/dataOne", {
        params: {
          coinTypeId: 1
        }
      })
      .then(function (res) {
        if(res.data.code == 0){
          self.info = res.data.data;
          var coinGain = res.data.data.gain || 0;
          if(coinGain<0){
            coinGain = (coinGain).toFixed(2)
          }
          else{
            coinGain = "+"+(coinGain).toFixed(2)
          }
          self.coinGain = coinGain;
          self.openPrice = res.data.data.openPrice.toFixed(2);
          self.info.usd = (res.data.data.openPrice / rate).toFixed(2);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    })
    .catch(function (error) {
      console.log(error);
    });



    //今日价格、成交量
    //获取当前时间的分钟数
    // var now = new Date();
    // var curMins = now.getHours() * 60 + now.getMinutes();
    // axios.get(api + "/front/kline/minute", {
    //   params: {
    //     pageNum: 1,
    //     minuteCount: curMins
    //   }
    // })
    // .then(function (res) {
    //   if(res.data.code == 0){
    //     var newArr = res.data.data;
    //     var total = 0;
    //     for(var i=0,len=newArr.length;i<len;i++){
    //       total += (newArr[i].dealCount || 0)
    //     }
    //     self.curInfo = {
    //       max: newArr[newArr.length - 1].highestPrice,
    //       min: newArr[newArr.length - 1].lowestPrice,
    //       total: total.toFixed(2)
    //     }
    //   }
    // })
    // .catch(function (error) {
    //   console.log(error);
    // });

    //分线图
    self.kline(1);

    //深度图
    self.getDeep();

  },
  mounted:function(){
    var thisNum = 1;
    var self = this;
    //重要！禁止移动端滑动的默认事件
    document.body.addEventListener('touchmove', function(event) {
        event = event ? event : window.event;
        if(event.preventDefault) {
            event.preventDefault()
        } else {
            event.returnValue = false
        }
    }, false)

    //左滑
    var startY, moveY, cliH, moveX, startX;
    //touchStart
    var touchstart = function(event) {
        if(!event.touches.length) {
            return;
        }
        startY = event.touches[0].pageY;
        moveY = 0;
        startX = event.touches[0].pageX;
        moveX = 0;
    };
    //touchMove
    var touchmove = function(event) {
        if(!event.touches.length) {
            return;
        }
        moveY = event.touches[0].pageY - startY;
        moveX = event.touches[0].pageX - startX;
    };
    //touchEnd
    var touchend = function(event) {
      //监听左滑
      var pageNum = self.pageNum;
      console.log(moveX)
      if(moveX > 200){
        console.log("右滑")
        thisNum = thisNum + 1;

        if(thisNum >2 && thisNum%2==0){
          self.pageNum = pageNum+1;
          self.kline(self.lineType);
        }
        else{
          self.showChart(2);
        }
      }
      if(moveX < -200){
        console.log("左滑")
        thisNum = thisNum - 1;
        if(thisNum > 2 && thisNum%2==1){
          self.pageNum = pageNum-1;
          self.kline(self.lineType);
        }
        else{
          self.showChart(1);
        }
      }
    }
    var box = document.getElementById("main");
    //touch事件绑定
    box.addEventListener("touchstart", function(event) {
        touchstart(event)
    }, false);
    box.addEventListener("touchmove", function(event) {
        touchmove(event)
    }, false);
    box.addEventListener("touchend", function(event) {
        touchend(event)
    }, false);

    //K线图
    var self = this;
    myChart = echarts.init(document.getElementById('main'));
    myChart.resize({
      height: canvasHeight+'px'
    })

    //数据模型 time0 open1 close2 min3 max4 vol5 tag6 macd7 dif8 dea9
    //['2015-10-19',18.56,18.25,18.19,18.56,55.00,0,-0.00,0.08,0.09] 
    // var data = splitData([
    //   ['2015-10-16',18.4,18.58,18.33,18.79,67.00,1,0.04,0.11,0.09],
    //   ['2015-10-19',18.56,18.25,18.19,18.56,55.00,0,-0.00,0.08,0.09],
    //   ['2015-10-20',18.3,18.22,18.05,18.41,37.00,0,0.01,0.09,0.09],
    //   ['2015-10-21',18.18,18.69,18.02,18.98,89.00,0,0.03,0.10,0.08],
    //   ['2015-10-22',18.42,18.29,18.22,18.48,43.00,0,-0.06,0.05,0.08],
    //   ['2015-10-23',18.26,18.19,18.08,18.36,46.00,0,-0.10,0.03,0.09],
    //   ['2015-10-26',18.33,18.07,17.98,18.35,65.00,0,-0.15,0.03,0.10]
    // ]);
    //console.log(data)

    // this.data = {
    //   datas: datas,
    //   times: times,
    //   vols: vols,
    //   macds: macds,
    //   difs: difs,
    //   deas: deas
    // };

    var data = self.kData;
    //数组处理
    function splitData(rawData) {
      var datas = [];
      var times = [];
      var vols = [];
      var macds = []; var difs = []; var deas = [];
      for (var i = 0; i < rawData.length; i++) {
        datas.push(rawData[i]);
        times.push(rawData[i].splice(0, 1)[0]);
        vols.push(rawData[i][4]);
        macds.push(rawData[i][6]);
        difs.push(rawData[i][7]);
        deas.push(rawData[i][8]);
      }
      return {
          datas: datas,
          times: times,
          vols: vols,
          macds: macds,
          difs: difs,
          deas: deas
      };
    }

    //分段计算
    function fenduans(){
      var markLineData = [];
      var idx = 0; var tag = 0; var vols = 0;
      for (var i = 0; i < data.times.length; i++) {
        //初始化数据
          if(data.datas[i][5] != 0 && tag == 0){
              idx = i; vols = data.datas[i][4]; tag = 1;
          }
          if(tag == 1){ vols += data.datas[i][4]; }
          if(data.datas[i][5] != 0 && tag == 1){
              markLineData.push([{
                  xAxis: idx,
                  yAxis: data.datas[idx][1]>data.datas[idx][0]?(data.datas[idx][3]).toFixed(2):(data.datas[idx][2]).toFixed(2),
                  value: vols
              }, {
                  xAxis: i,
                  yAxis: data.datas[i][1]>data.datas[i][0]?(data.datas[i][3]).toFixed(2):(data.datas[i][2]).toFixed(2)
              }]);
              idx = i; vols = data.datas[i][4]; tag = 2;
          }
          
          //更替数据
          if(tag == 2){ vols += data.datas[i][4]; }
          if(data.datas[i][5] != 0 && tag == 2){
              markLineData.push([{
                  xAxis: idx,
                  yAxis: data.datas[idx][1]>data.datas[idx][0]?(data.datas[idx][3]).toFixed(2):(data.datas[idx][2]).toFixed(2),
                  value: (vols/(i-idx+1)).toFixed(2)+' M'
              }, {
                  xAxis: i,
                  yAxis: data.datas[i][1]>data.datas[i][0]?(data.datas[i][3]).toFixed(2):(data.datas[i][2]).toFixed(2)
              }]);
              idx = i; vols = data.datas[i][4];
          }
      }
      return markLineData;
    }

  }
})
</script>

</body>
</html>